

<template>
    <el-button plain @click="dialogVisible = true">
        新增
    </el-button>


    <div>
        <h2>显示权限</h2>
        <el-table :data="tableData" style="width: 50%">
            <el-table-column fixed type="index" label="序号" />
            <el-table-column prop="pressName" label="权限名称" />
            <el-table-column label="操作" #default="scope">
                <el-button type="danger" @click="shan(scope.row.pressId)" plain>删除</el-button>
                <el-button type="success" @click="xiug(scope.row)" plain>修改</el-button>
            </el-table-column>
        </el-table>
        <tr>



<td>

    <el-dialog v-model="dialogVisible" title="新增" width="500" :before-close="handleClose">
        <span>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm"
                label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="权限名称" prop="pressName">
                    <el-input v-model="ruleForm.pressName" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        添加
                    </el-button>
                    <el-button @click="dialogVisible=false">关闭</el-button>
                </el-form-item>
            </el-form>
        </span>
   
    </el-dialog>

</td>



 <td>



    <el-dialog v-model="update" title="修改" width="500" :before-close="xiug">
        <span>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules"
                label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="权限名称" prop="pressName">
                    <el-input v-model="ruleForm.pressName" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="xiu()">
                        修改
                    </el-button>
                    <el-button @click="update=false">关闭</el-button>
                </el-form-item>
            </el-form>
        </span>
        <template #footer>


        </template>
    </el-dialog>


</td> 
</tr>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
import { compile, computed, nextTick, onMounted, reactive, ref } from "vue";

import axios from "axios";
const tableData = ref([])
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
    pressId: 0,
    pressName: '',

})
onMounted(() => {
    show();
})
const show = () => {
    axios({
        url: "http://localhost:5056/api/Pression/GetPression",
        method: 'get'
    })
        .then((res) => {
            tableData.value = res.data.data
        })
}



const shan = (pressId: any) => {
    alert(pressId)
    ElMessageBox.confirm(
        '确认删除吗',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios({
                url: "http://localhost:5057/api/Pression/DeletePression",
                method: 'put',
                data:
                {
                    pressId: pressId
                }
            })
                .then((res) => {
                    console.log(res.data)
                    if (res.data.code == 204) {

                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                            

                        })
                        show();
                    }
                })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败',
            })
        })
}
const dialogVisible = ref(false)
const handleClose = () => {
    dialogVisible.value = true;
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios({
                url: 'http://localhost:5057/api/Pression/AddPression',
                method: 'post',
                data: ruleForm
            })
                .then((res) => {
                    console.log(res)
                    if (res.data.code == 100) {
                        ElMessage.success("添加成功");
                        dialogVisible.value = false;
                        show();
                    }
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}
const update = ref(false);
const xiug = (res:any) => {
    update.value = true;
    ruleForm.pressId = res.pressId;
    ruleForm.pressName = res.pressName;
   
}
const xiu = () => {
    axios({
        url: 'http://localhost:5057/api/Pression/UpdatePression',
        method: 'put',
        data: ruleForm
    })
        .then((res) => {
            if (res.data.code == 206) {
                ElMessage.success("修改成功");
                update.value=false
                show();
            }
        })
}

</script>

<style scoped></style>